<template>
    <div class="home-swiper">
        <van-search v-model="value" placeholder="请输入搜索关键词"  input-align="center" @focus="onFocus" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerData" :key="item.id">
           <!-- <img :src="item.picUrl" alt=""> -->
          <van-image :src="item.picUrl" lazy-load radius="20px"/>
          </van-swipe-item>
      </van-swipe>
    </div>
    
</template>


<script>

import { Toast } from 'vant';
    // import axios from "axios";
    export default {
     data() {
      return {
      value: '',
      bannerData:[]
      };
     },
     created(){
        this.getBanner()
     },
    methods:{
      onFocus(){
            Toast("触发获得焦点事件")
        },
        onSearch(val){
            Toast(val);
            
        },
        //写一个网络请求的方法
        getBanner(){
          this.$request('get','/recommend/banner')
          .then(res =>{
            // console.log(res)
            if(res.result == 100){
              this.bannerData = res.data
            }
          })
        }
     }
    
};
</script>

<style scoped>
    /* .my-swipe .van-swipe-item img{ 
      width: 100%;
    } */
  </style>